现版本的ant design pro，无论使用官方文档的建议指令还是退到npm i @ant-design/pro-cli@3.1.0 -g安装，不管你选择umi4,还是umi3，最终安装的都是umi4, 而umi4现在的常见问题是启动时为空白页，安装网上的将相关router文件中的代码删掉后（如下图），只能解决临时问题，启动正常，但是会跳过登录直接到首页。我觉得这是比较严重问题🙂，而相关问题官方没有给出解决方案，官方也已经2个多月没有更新代码了，请问有没有彻底的解决方法？ PS：割到大动脉了吧🫠，虽然可以直接写后端代码，但还是希望能够前后端联调，实在不行只能就这样了。。。

用户中心--前后端联调

# 前端 ## 前端代码简洁 ### 登录默认显示无法更改 #### 问题： 修改登录界面，去掉不需要的信息，比如图标及无用链接（也可以换成你自己的） <img src="https://pic.code-nav.cn/post_picture/1831696400089411585/zI5W0sotZX6DWxFT.webp" alt="image-20240919105029292.png" width="100%" /> 在账号密码的默认值那里出了问题，上图中输入框中的值一直无法更改，原代码如下： ```tsx {type === 'account' && ( <> <ProFormText name="username" fieldProps={{ size: 'large', prefix: <UserOutlined />, }} placeholder={intl.formatMessage({ id: 'pages.login.username.placeholder', defaultMessage: '用户名: admin or user', })} rules={[ { required: true, message: ( <FormattedMessage id="pages.login.username.required" defaultMessage="请输入用户名!" /> ), }, ]} /> <ProFormText.Password name="password" fieldProps={{ size: 'large', prefix: <LockOutlined />, }} placeholder={intl.formatMessage({ id: 'pages.login.password.placeholder', defaultMessage: '密码: ant.design', })} rules={[ { required: true, message: ( <FormattedMessage id="pages.login.password.required" defaultMessage="请输入密码！" /> ), }, ]} /> </> )} ``` 更改 defaultMessage 无效，不会跟着变。 #### 解决 **原因：去国际化失败，只需要重新运行去掉国际化的代码即可。** ``` {intl.formatMessage({ id: 'pages.login.password.placeholder', defaultMessage: '密码: ant.design', })} ``` > **`intl.formatMessage({...})`**： > > - 这是一个 **国际化函数**，通常来自 `react-intl` 库。`intl.formatMessage()` 用于根据语言环境获取相应的文本信息。 > - **`id: 'pages.login.username.placeholder'`**：`id` 是占位符的国际化标识符，表示在语言文件中对应的文本键。例如，可能在 `en.json` 文件中对应的值是 `"Username: admin or user"`，而在 `zh.json` 文件中对应的值可能是 `"用户名: admin 或 user"`。 > - **`defaultMessage: '用户名: admin or user'`**：这是一个默认值。如果当前用户的语言环境没有找到相应的翻译文本，则使用这个默认消息作为占位符。 运行去国际化脚本后，代码自动变为下面： ```tsx {type === 'account' && ( <> <ProFormText name="username" fieldProps={{ size: 'large', prefix: <UserOutlined />, }} placeholder={'用户名: admin or user'} rules={[ { required: true, message: '用户名是必填项！', }, ]} /> <ProFormText.Password name="password" fieldProps={{ size: 'large', prefix: <LockOutlined />, }} placeholder={'密码: ant.design'} rules={[ { required: true, message: '密码是必填项！', }, ]} /> </> )} ``` 此时直接修改 placeholder 即可。 <font color='red'>【更新】：修改账号密码表单里的 name ，更换传递参数的名称，与后端参数对应</font> ### 运行报错 #### 问题 ```shell error - ./src/components/index.ts Module build failed (from ./node_modules/@umijs/bundler-webpack/compiled/babel-loader/index.js): SyntaxError: D:\IDEA\code\项目\鱼皮\用户中心\项目\前端\test03\src\components\index.ts: Export 'SelectLang' is not defined. (11:55) 9 | import { Question } from './RightContent'; 10 | import { AvatarDropdown, AvatarName } from './RightContent/AvatarDropdown'; > 11 | export { AvatarDropdown, AvatarName, Footer, Question, SelectLang }; ``` #### 解决 将`export { AvatarDropdown, AvatarName, Footer, Question, SelectLang };`最后的 SelectLang 去掉即可。 ## 修改登录url ### 修改接口 请求接口：http://localhost:8000/api/login/account?token%20=%20123 #### 1、【可不改】修改 token 等号两边的 %20，即去掉空格。 <font color='red'>这里也可以不改，不影响，我改主要是看起来 url 会舒服很多</font> 全局查看可知文件为：test03\src\requestErrorConfig.ts，代码如下： ```tsx // 请求拦截器 requestInterceptors: [ (config: RequestOptions) => { // 拦截请求配置，进行个性化处理。 const url = config?.url?.concat('?token = 123'); return { ...config, url }; }, ], ``` #### 2、【可不改】修改端口号，改为后端的端口号。 <font color='red'>这里可以不改，因为后续要用上代理，就不需要跨域了，也就是说后面还得改回来</font> 全局搜索 request ，进入`test03\src\app.tsx`配置文件： ```tsx /** * @name request 配置，可以配置错误处理 * 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。 * @doc https://umijs.org/docs/max/request#配置 */ export const request = { ...errorConfig, }; ``` 进入umi参考配置后发现参考的是 [axios](https://axios-http.com/docs/req_config)，继续跳转，可知需要配置的是`**baseURL**`（注意大小写）： ```tsx export const request = { ...errorConfig, baseURL: 'http://localhost:8800', }; ``` ### 修改参数 请求参数：{"username":"1","password":"1","autoLogin":true,"type":"account"} #### 1、修改参数为`userAccount`、`userPassword` 登录接口的路径在：test03\src\services\ant-design-pro\api.ts ```tsx /** 登录接口 POST /api/login/account */ export async function login(body: API.LoginParams, options?: { [key: string]: any }) { return request<API.LoginResult>('/api/login/account', { method: 'POST', headers: { 'Content-Type': 'application/json', }, data: body, ...(options || {}), }); } ``` 函数如上所示，可以进入 API.LoginParams（test03\src\services\ant-design-pro\typings.d.ts）： ```tsx type LoginParams = { userAccount?: string; userPassword?: string; autoLogin?: boolean; type?: string; }; ``` > 但是修改上述参数名称并未修改请求中的参数，继续寻找原因。 > > 我知道了，我只修改了传递的类，并没有改前端表单的名字，我应该修改表单的 name ，即上述 ProFormText 中的 name。 ## 正向代理 ### 简介： 反向代理（Reverse Proxy）和正向代理（Forward Proxy）是两种用于优化网络性能和安全性的技术。反向代理服务器位于客户端和实际服务器之间，而正向代理服务器则位于实际服务器和客户端之间。 1. 反向代理：反向代理服务器**接收客户端的请求，并将其转发到实际的服务器**。一旦从实际服务器收到响应，反向代理服务器将其返回给客户端。这种机制使得客户端与实际服务器之间的通信对客户端来说是透明的。 2. 正向代理：正向代理服务器位于实际服务器和客户端之间，它会**接收客户端的请求，并将其转发到实际的服务器**。一旦从实际服务器收到响应，正向代理服务器将其返回给客户端。与反向代理不同的是，客户端需要明确地知道正向代理的存在。 ### 配置 #### 1、修改前端代理路径 进入代理文件 test03\config\proxy.ts ： ```tsx /** * @name 代理的配置 * @see 在生产环境 代理是无法生效的，所以这里没有生产环境的配置 * ------------------------------- * The agent cannot take effect in the production environment * so there is no configuration of the production environment * For details, please see * https://pro.ant.design/docs/deploy * * @doc https://umijs.org/docs/guides/proxy */ export default { // 如果需要自定义本地开发服务器 请取消注释按需调整 dev: { // localhost:8000/api/** -> https://preview.pro.ant.design/api/** '/api/': { // 要代理的地址 // target: 'https://preview.pro.ant.design', target: 'http://localhost:8800', // 配置了这个可以从 http 代理到 https // 依赖 origin 的功能可能需要这个，比如 cookie changeOrigin: true, }, }, /** * @name 详细的代理配置 * @doc https://github.com/chimurai/http-proxy-middleware */ test: { // localhost:8000/api/** -> https://preview.pro.ant.design/api/** '/api/': { target: 'https://proapi.azurewebsites.net', changeOrigin: true, pathRewrite: { '^': '' }, }, }, pre: { '/api/': { target: 'your pre url', changeOrigin: true, pathRewrite: { '^': '' }, }, }, }; ``` 点击上述 docs 进入官方文档查看用法，如下： > 上述配置表示，将 `/api` 前缀的请求，代理到 `http://jsonplaceholder.typicode.com/`，替换请求地址中的 `/api` 为 `''`，并且将请求来源修改为目标url。如请求 `/api/a`，实际上是请求 `http://jsonplaceholder.typicode.com/a`。 > > 一般我们使用这个能力来解决开发中的跨域访问问题。由于浏览器（或者 webview）存在同源策略，之前我们会让服务端配合使用 Cross-Origin Resource Sharing (CORS) 策略来绕过跨域访问问题。现在有了本地的 node 服务，我们就可以使用代理来解决这个问题。 【注意】：之前修改 request 的 url 的时候如果修改过端口需要改回来，因为这里代理是用前端的端口的代理，如果说修改过 request 的 url，那么请求的将不再是前端端口下的路径。 #### 修改后端前缀路径 修改配置文件 application.properties，加前缀： ```properties server.servlet.context-path=/api ``` > **`server.servlet.context-path`**：这是 Spring Boot 的一个配置属性，定义了应用程序的 **上下文路径**。它用于指定应用中所有请求路径的前缀。

这个怎么会白屏啊，看不到登录页面 鱼皮的用户中心。 卡了好久了 nodejs用的18 蚂蚁项目是最新的 前端白屏

#前端# 项目 React开发用户中心项目，封装了下统一响应处理，默认Antd Pro 提供的是message提示，为了改成notification折腾了半天，还翻了源码，官方的文档写的是真简单啊... 分享下成果#Ant Design Pro# ```tsx const responseInterceptors = async (response: Response, options: RequestConfig) => { if (response.status != 200) return Promise.reject('') const json = await response.clone().json(); const {code, message, data, description} = json if (code !== 0) { throw Error(description || message) } return data; }; // request config export const request: RequestConfig = { timeout: 10000, errorConfig: {}, // skip errorhandler覆盖默认行为 skipErrorHandler: true, errorHandler: (error: ResponseError) => { notification.error( { message: '提示', description: error.message } ) }, middlewares: [], requestInterceptors: [], responseInterceptors: [responseInterceptors], prefix: '/api' }; ```